<template>
  <div>
    <set-header :text="text" :title="title" :chooseColor="chooseColor" :last-color="lastColor"></set-header>
    <div class="body">
      <div class="body-box">
        <div class="reward">
          <div class="floatLeft one">
            <span>Reward #1</span>
          </div>
          <div class="table">
            <span class="title">Title</span><input type="text" class="titleNull"/>
            <span class="amount">Pledge amount</span><input type="text" class="amountNum" placeholder="AU$ 0"/>
            <span class="description">Description</span>
            <span class="description-right">
              <span class="descriptionNull"></span>
              <span class="descriptionAdd">+ Add an item</span>
            </span>
            <span class="delivery">Estimated <br/>delivery</span>
            <span class="dropDate"><span class="dropDate-title" @click="btnShow">{{today}}</span>
              <span class="dropDate-box" v-show="isShowWeek" >
                <span v-for="(item,key) in weekends" :key="key" @click="btnChoose(key)">{{item}}</span>
              </span>
            </span>
            <span class="dropYear">2018</span>
            <span class="detail">Shiooing details</span><span class="detail-Select">Select an option</span>
            <span class="limit">Limit availability</span>
            <span class="limitCheck"><input type="checkbox" id="Enable"/><label for="Enable">Enable reward limit</label></span>
          </div>
          <span class="delete">Delete</span>
          <div class="clear">
          </div>
        </div>
        <div class="button">
          <button class="buttonAdd">Add a new reward</button>
        </div>
        <div class="clear"></div>
        <!--左下角部分-->
        <div class="body-bottom">
          <div class="how">
            <span class="floatLeft block how-left"></span>
            <span class="floatLeft block how-right">
              <span class="block">How to：</span>
              <span class="block"><a href="javascript:(viod)">Make an awesome project</a></span>
            </span>
          </div>
          <div class="need">
            <span class="block">What to offer</span>
            <span class="block">Copies of what you’re making, unique experiences, and limited editions work great.</span>
          </div>
          <div class="price">
            <span class="price-title block">How to price</span>
            <ul>
              <li>Price fairly, and offer q good value. What woulf you consider a fair exchange?</li>
              <li>Something fun for AU$10 or less is always see reward amounts and funding goals <a href="javascript:(viod)">reflected in USD.</a></li>
            </ul>
          </div>
        </div>
      </div>


    </div>
    <set-footer></set-footer>
  </div>

</template>

<script>
  import setHeader from '../public/SetHeader'
  import setFooter from '../public/SetFooter'

    export default {
        name: "set-your-rewards",
        components:{ setHeader, setFooter },
        data(){
            return {
                weekends:[ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ],
                isShowWeek:false,
                today:'February',
                text:'Invite backers to be a part of the creative experience by offering rewards like a copy of what you’re making, a special experience, or a behind-the-scenes look into your process.',
                title:'Set your rewards and shipping coasts.',
                chooseColor:[ false, true, false, false, false ],
                lastColor:[ '', '', '', '', '' ]
            };
        },
        methods:{
            btnShow(){
                    this.isShowWeek = true;
            },
            btnChoose(key){
                this.today = this.weekends[key];
                this.isShowWeek = false;
            }
        }
    }
</script>

<style scoped lang="scss">
  .clear{clear: both}
  .floatLeft{float: left}
  .block{display: block}
.body{
  width: 100vw;
  background-color:#DBDEDD;
  .body-box{
    width: 930px;
    margin: 0 auto;
    padding:22px 0 67px 24px;
    background-color: white;
    .reward{
      width: 640px;
      height: 378px;
      background: #F8F9FD;
      margin-bottom: 21px;
      .one{
        padding:16px 105px 0 14px;
        font-family: Arial-BoldMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.4px;
        height: 624px;
      }
    }
    .table{
      padding-top: 5.5px;
      input{
        outline: none;
        border: none;
        vertical-align: middle;
        background-color:#F8F9FD;
        width: 321.8px;
        border-bottom: 1px solid #DBDEDD;
        padding-left: 10.5px;
      }
      span{
        display: inline-block;
        vertical-align: middle;
        padding-left: 10.5px;
        box-sizing: border-box;
      }
      .title{
        width:119.5px;
        line-height: 36.5px;
        border-right: 1px solid #DBDEDD;
        border-bottom: 1px solid #DBDEDD;
      }
      .titleNull{height: 36.5px;}
      .amount{
        line-height: 39px;
        width: 119.5px;
        border-right: 1px solid #DBDEDD;
        border-bottom: 1px solid #DBDEDD;
      }
      .amountNum{line-height: 39px;}
      .description{
        height:105px;
        width: 119.5px;
        line-height: 39px;
        border-right: 1px solid #DBDEDD;
        border-bottom: 1px solid #DBDEDD;
      }
      .description-right{
        width: 332.3px;
        height:105px ;
        border-bottom: 1px solid #DBDEDD;
        padding: 0;
      }
      .descriptionNull{
        display: block;
        height: 67.5px;
        width: 332.3px;
        border-bottom: 1px solid #DBDEDD;
      }
      .descriptionAdd{line-height: 37.5px;}
      .delivery{
        width: 119.5px;
        height: 46px;
        font-family: ArialMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.2px;
        line-height: 17px;
        padding-top: 9px;
      }
      .dropDate{
        line-height: 35.5px;
        width:195.8px;
        border: 1px solid #DBDEDD;
        border-top: none;
        margin-top: -8px;
        margin-left: -1px;
        position:relative;
        .dropDate-title{
          width: 195.8px;
          margin-left: -12.5px;
        }
        .dropDate-box{
          position: absolute;
          width:195.8px;
          border: 1px solid #DBDEDD;
          left: -1px;
          background-color:#F8F9FD;
          top: 37px;
          span{
            display: block;
            margin-left:-11px;
            &:active{background: #E8E8E8;}
          }
        }
      }
      .dropYear{
        margin-top: -8px;
        margin-left: -1px;
        width:136.5px;
        line-height: 37.5px;
        border-bottom:1px solid #DBDEDD;
      }
      .detail{
        line-height: 38px;
        width: 119.5px;
        border:1px solid #DBDEDD;
        border-left: none;
      }
      .detail-Select{
        width: 332.3px;
        line-height: 38px;
        border-top:1px solid #DBDEDD;
        border-bottom:1px solid #DBDEDD;
      }
      .limit{
        line-height: 38px;
        width: 119.5px;
        border-right:1px solid #DBDEDD;
      }
      .limitCheck{
        input{
          padding: 0;
          width: 12px;
          margin-right: 5px;
        }
      }
    }
    .delete{
      float: right;
      margin: 15px 17px 0 0;
      font-family: ArialMT;
      font-size: 14px;
      color: #2E2E2E;
    }
    .button{
      padding: 0;
      .buttonAdd{
        width: 640px;
        height: 95px;
        margin-left: -182px;
        background: #FFFFFF;
        border: 1px dashed #DBDEDD;
        border-radius: 2px;
        outline: none;
      }
    }
    .body-bottom{
      .how{
        width: 220px;
        height: 50px;
        background: #F0F0F0;
        border-radius: 3px;
        margin-bottom: 30px;
        .how-left{
          background: #D8D8D8;
          border: 1px solid #979797;
          width: 25px;
          height: 34px;
          margin: 7px 8px 0 9px;
        }
        .how-right{
          margin-top: 7px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          a{
            font-family: Arial-BoldMT;
            font-size: 14px;
            color: #2C59F6;
            letter-spacing: -0.7px;
            margin-top: 1px;
            text-decoration: none;
          }
        }
      }
      .need{
        font-size: 12px;
        color: #2E2E2E;
        span{
          font-family: ArialMT;
          letter-spacing: 0.2px;
          line-height: 17px;
          width: 220px;
        }
        span:nth-child(1){
          font-family: Arial-BoldMT;
          margin-bottom: 11px;
        }
      }
      .price{
        font-size: 12px;
        .price-title{
          margin: 25px 0 10px 0;
          font-family: Arial-BoldMT;

          color: #E93343;
        }
        li{
          width: 221px;
          list-style: disc;
          margin-left: 32px;
          font-family: ArialMT;
          color: #2E2E2E;
          a{text-decoration: none;}
          line-height: 17px;
        }
      }
    }
  }

}
</style>
